<html>
    <head>
        <title>RazorPage中使用ES Module (ECMAScript模块，即 import/export 语法)</title>
    </head>
    <body>
        <script>
            /*
                    在ABP框架的Razor Pages 中使用ES Modules 中（ECMAScript 模块，即import/export语法）是可行的，

                    但需要进行一些配置和调整。

                    ABP默认使用传统的JavaScript加载方式( 如全局变量 和 RequireJS),但可以通过一下方法支持现代 ES Modules:

            */

            /*
                一、ABP vNext 对ES Modules的支持

                        ABP xNext(5.0+) 已经开始支持现代前端开发模式，包括：

                            ①、Webpack集成；  通过 Volo.Abp.AspNetCore.Servers.IIS  包支持Webpack打包。

                            ②、NPM包管理器： 允许通过package.json管理前端依赖

                            ③、Razor组件：  支持 Blazor风格的组件开发(基于 Razor语法)
            */

            /*
                二、配置 ES Modules支持

                       ★、步骤1：   启用静态文件服务

                                    确保 Startup.cs （或Program.cs） 中启用了静态文件 服务：

                                    eg：

                                        // Startup.cs (ASP.NET Core 3.x)
                                        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                                        {
                                            app.UseStaticFiles(); // 确保此行存在
                                            // ...
                                        }

                                        // 或 Program.cs (ASP.NET Core 6.0+)
                                        app.UseStaticFiles(); // 添加到应用配置中

                        ★、步骤2：  创建JavaScript文件：

                                在wwwroot目录下创建 ES 模块文件（例如wwwroot/js/my-module.js）：

                                  eg：

                                        // my-module.js
                                        export const sayHello = () => {
                                            return "Hello from ES Module!";
                                        };

                        ★、步骤3： 在Razor Pages 中引用模块：

                                使用 <script type="module"> 引用ES 模块：

                                        -- 在Razor Page中 --
                                        <script type="module">
                                            import { sayHello } from './js/my-module.js';
                                            document.addEventListener('DOMContentLoaded', () = {
                                                console.log(sayHello());
                                            });
                                        <//script>
                                
            */

            /*
                三、与Vue组件集成

                        如果你需要在 Vue 组件中使用 ES Modules，可以这样做：

                                <-- Vue组件模板 --
                                <script type="text/x-template" id="my-component-template">
                                    <div>
                                        <button @click="doSomething">点击</button>
                                    </div>
                                </、script>

                                <script type="module">
                                    // 导入外部模块
                                    import { fetchData } from './js/data-service.js';
                                    
                                    var MyComponent = {
                                        template: '#my-component-template',
                                        methods: {
                                            async doSomething() {
                                                const data = await fetchData();
                                                console.log(data);
                                            }
                                        }
                                    };
                                    
                                    // 注册组件
                                    Vue.component('my-component', MyComponent);
                                </、script>                  
            */

            /*
                四、处理模块路径问题

                        1、相对路径：  确保模块路径正确  eg:  "./js/module.js"

                        2、绝对路径：  使用"~"标识应用根目录

                                    import { util } from '~/js/utils.js'; // 等价于 /js/utils.js
            */

            /*
                五、注意事项

                        1、浏览器兼容性

                                    ES Modules 需要现代浏览器支持（IE 不支持），如果需要兼容旧浏览器，建议使用 Babel 和 Webpack 进行转译。

                        2、 RequireJS 共存

                                    如果 ABP 项目中已经使用了 RequireJS，需要注意两者的加载顺序：

                                    -- 先加载RequireJS --
                                    <script src="~/lib/requirejs/require.js"></、script>

                                    -- 再使用ES Modules --
                                    <script type="module">
                                        // ES模块代码
                                    </、script>

                        3、使用Webpack打包

                                    对于复杂项目，建议使用 Webpack打包ES模块：

                                    ①、安装 Webpack和相关加载器：

                                           npm install webpack webpack-cli babel-loader @babel/core --save-dev

                                    ②、配置webpack.config.js处理模块打包

                                    ③、在 ABP 项目中引用打包后的文件
            */

            /*
                 六、总结

                         ABP  的Razor Pages 可以支持ES Modules,但需要：

                                    1、正确配置静态文件服务

                                    2、使用<script type="module">语法

                                    3、处理好模块路径和依赖关系

                                    4、(可选) 使用Webpack进行打包优化

            */

           
        </script>
    </body>
</html>